<template>
  <div class="button">
    <h2>表单组件</h2>

    <el-form :model="user" label-width="100px" label-position="left">

      <el-form-item label="单行文本域">
        <el-input placeholder="请输入账号" v-model="user.username"></el-input>
      </el-form-item>

      <el-form-item label="密码输入框">
        <el-input show-password placeholder="请输入密码" v-model="user.pwd"></el-input>
      </el-form-item>

      <el-form-item label="下拉菜单">
        <el-select v-model="user.hidden" placeholder="--请选择--">
          <el-option label="篮球" value="篮球"></el-option>
          <el-option label="足球" value="足球"></el-option>
          <el-option label="乒乓球" value="乒乓球"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="日期选择器">
        <!-- 不设置type默认为年月日 -->
        <el-date-picker v-model="user.data" placeholder="请选择日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="时间选择器">
        <!-- 不设置type默认为年月日 -->
        <el-time-picker v-model="user.times" placeholder="请选择时间"></el-time-picker>
      </el-form-item>

      <el-form-item label="开关控件">
       否<el-switch v-model="user.isYes"/>是
      </el-form-item>

      <el-form-item label="单个复选框">
       <el-checkbox v-model="user.isAgreen"/>已阅读并同意服务条款
      </el-form-item>

      <el-form-item label="多个复选框">
        <!-- 按组划分，设置同一个name属性值：一组复选框需要设置value值 -->
       <el-checkbox-group v-model="user.subject">
        <el-checkbox value="计算机应用技术专业" name="subject">计算机应用技术专业</el-checkbox>
        <el-checkbox value="室内设计专业" name="subject">室内设计专业</el-checkbox>
        <el-checkbox value="电子商务专业" name="subject">电子商务专业</el-checkbox>
        <el-checkbox value="经济与贸易专业" name="subject">经济与贸易专业</el-checkbox>
       </el-checkbox-group>
      </el-form-item>


      <el-form-item label="单选框">
       <el-radio-group v-model="user.isYesorNo">
          <el-radio value="yes">是</el-radio>
          <el-radio value="no">否</el-radio>
          <el-radio value="other">其他</el-radio>
       </el-radio-group>
      </el-form-item>
      

      <el-form-item label="">
       <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>


    </el-form>


  </div>
</template>

<script setup>
import { reactive } from "vue";



const user = reactive({
  username : '',
  pwd : '',
  hidden : '',
  date : '',
  tiems : '',
  isYes : false,
  isAgreen : false,
  subject : [],
  isYesorNo : '',
})

const onSubmit=()=>{
  console.log(user);
  
}
</script>

<style>

</style>